import { Component } from 'react'
import { inject, observer } from 'mobx-react'

@inject('todo')
@observer
class TodoExtra extends Component {
  render() {
    const { unfinishedTodoCount, changeFilter } = this.props.todo
    return (
      <footer className='footer'>
        <span className='todo-count'>
          <strong>{unfinishedTodoCount}</strong> item left
        </span>
        <ul className='filters'>
          <li>
            <button onClick={() => changeFilter('all')}  className='selected'>All</button>
          </li> 
          <li> 
            <button onClick={() => changeFilter('active')} >Active</button>
          </li> 
          <li> 
            <button onClick={() => changeFilter('completed')} >Completed</button>
          </li>
        </ul>

        <button className='clear-completed'>Clear completed</button>
      </footer>
    )
  }
}

export default TodoExtra
